﻿<template>
  <el-dialog v-drag :title = 'dialogEditTitle' :visible.sync = 'dialogEditVisible' :width = 'dialogEditWidth' :before-close = 'closeDialog'>
    <el-form :label-width = 'labelEditWidth' :model = 'ruleEditForm' class = 'show_content'>
      <el-form-item label = "请求的地址：">
        <el-input :disabled = "editInfo.status === 'show'" v-model = 'ruleEditForm.RequestUrl' placeholder = "请输入请求的Url,本系统的服务,可用~表示,远程的请填写完整的url地址"></el-input>
      </el-form-item>
      <el-form-item label = "请求的方法：">
        <el-input :disabled = "editInfo.status === 'show'" v-model = 'ruleEditForm.RequestMethod' placeholder = "请输入请求的方法,如：GET、POST等"></el-input>
      </el-form-item>
      <div style = 'margin-bottom:20px;'>
        <span class = 'tableLabel'>请求头信息：</span>
        <div class = 'tableContent'>
          <div class = 'page_tableContent'>
            <div class = 'addBtn' v-show = "editInfo.status !== 'show'">
              <p @click = "addRequestHeader('RequestHeaderArray')"><i class='iconfont icon-add'></i>新增请求头信息</p>
            </div>
            <el-table :data = 'ruleEditForm.RequestHeaderArray' style = 'width:100%' empty-text = '暂无请求头信息'
            border stripe class = 'editTable'>
              <el-table-column align = 'center' label = '请求头属性名'>
                <template slot-scope = 'scope'>
                  <el-input :disabled = "editInfo.status === 'show'" v-model = "scope.row.tableKey" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = 'center' label = '请求头属性值'>
                <template slot-scope = 'scope'>
                  <el-input :disabled = "editInfo.status === 'show'" v-model = "scope.row.tableValue" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = 'center' label = '操作' width = '80'>
                <template slot-scope = 'scope'>
                  <el-button type = 'text' :disabled = "editInfo.status === 'show'" @click = "handleEditDelete(scope.$index, 'RequestHeaderArray')"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div style = 'margin-bottom:20px;'>
        <span class = 'tableLabel'>请求的查询信息：</span>
        <div class = 'tableContent'>
          <div class = 'page_tableContent'>
            <div class = 'addBtn' v-show = "editInfo.status !== 'show'">
              <p @click = "addRequestHeader('RequestQueryStringArray')"><i class = 'iconfont icon-add'></i>新增请求的查询信息</p>
            </div>
            <el-table :data = 'ruleEditForm.RequestQueryStringArray' style = 'width:100%' empty-text = '暂无请求的查询信息'
            border stripe class = 'editTable'>
              <el-table-column align = 'center' label = '请求query属性名'>
                <template slot-scope = 'scope'>
                  <el-input :disabled = "editInfo.status === 'show'" v-model = "scope.row.tableKey" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = 'center' label = '请求query属性值' :render-header = 'handelHelp' label-class-name = "可以输入 @ 符号，以获取变量名称">
                <template slot-scope = 'scope'>
                  <el-autocomplete :disabled = "editInfo.status === 'show'" v-model = "scope.row.tableValue" placeholder = "请输入"
                  :fetch-suggestions = "querySearch" :trigger-on-focus = "false"></el-autocomplete>
                </template>
              </el-table-column>
              <el-table-column align = 'center' label = '操作' width = '80'>
                <template slot-scope = 'scope'>
                  <el-button type = 'text' :disabled = "editInfo.status === 'show'" @click = "handleEditDelete(scope.$index, 'RequestQueryStringArray')"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div style = 'margin-bottom:20px;'>
        <span class = 'tableLabel'>请求主体信息：</span>
        <div class = 'tableContent'>
          <div class = 'page_tableContent'>
            <div class = 'addBtn' v-show = "editInfo.status !== 'show'">
              <p @click = "addRequestHeader('RequestPostDataArray')"><i class = 'iconfont icon-add'></i>新增请求主体信息</p>
            </div>
            <el-table :data = 'ruleEditForm.RequestPostDataArray' style = 'width:100%' empty-text = '暂无请求主体信息'
            border stripe>
              <el-table-column align = 'center' label='请求主体属性名'>
                <template slot-scope = 'scope'>
                  <el-input :disabled = "editInfo.status === 'show'" v-model = "scope.row.tableKey" placeholder = "请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column align = 'center' label = '请求主体属性值' :render-header = 'handelHelp' label-class-name = "可以输入 @ 符号，以获取变量名称">
                <template slot-scope = 'scope'>
                  <el-autocomplete :disabled = "editInfo.status === 'show'" v-model = "scope.row.tableValue" placeholder = "请输入"
                  :fetch-suggestions = "querySearch" :trigger-on-focus = "false"></el-autocomplete>
                </template>
              </el-table-column>
              <el-table-column align = 'center' label = '操作' width = '80'>
                <template slot-scope = 'scope'>
                  <el-button type = 'text' :disabled = "editInfo.status === 'show'" @click = "handleEditDelete(scope.$index, 'RequestPostDataArray')"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-form-item class = 'form_noLeftMargin' v-if = "editInfo.status !== 'show'">
        <el-button type = "info"  @click = "handleClose ()">取 消</el-button>
        <el-button type = "primary" @click = "handleSubmit ()">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['editInfo', 'showEditDialog'],
  data () {
    return {
      dialogEditVisible: false,
      dialogEditTitle: '查看事件参数信息',
      labelEditWidth: '130px',
      dialogEditWidth: '50%',
      ruleEditForm: {
        RequestUrl: '',
        RequestMethod: '',
        // 请求的自定义Header信息
        RequestHeaderArray: [],
        // 请求的Querystring参数
        RequestQueryStringArray: [],
        // 请求的自定义PostData
        RequestPostDataArray: []
      },
      // input输入建议
      paramsList: []
    }
  },
  methods: {
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 获取input输入建议值
    querySearch (queryString, cb) {
      var paramsList = this.paramsList
      var results = queryString ? paramsList.filter(val => {
        return val.value.indexOf(queryString) === 0
      }) : paramsList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 获取输入建议的列表
    getParamsList () {
      return [
        {'value': '@row'},
        {'value': '@login_id'},
        {'value': '@login_name'}
      ]
    },
    // 删除一条信息时
    handleEditDelete (index, arrayName) {
      this.ruleEditForm[arrayName].splice(index, 1)
    },
    // 新增请求头信息
    addRequestHeader (arrayName) {
      this.ruleEditForm[arrayName].unshift({
        tableKey: '',
        tableValue: ''
      })
    },
    // 清空dialog的内容
    clearForm () {
      this.ruleEditForm.RequestUrl = ''
      this.ruleEditForm.RequestMethod = ''
      this.ruleEditForm.RequestHeaderArray = []
      this.ruleEditForm.RequestQueryStringArray = []
      this.ruleEditForm.RequestPostDataArray = []
    },
    // 获取键值对的信息
    getKeyValue (keyValueArray) {
      if (keyValueArray.length) {
        let objExam = {}
        keyValueArray.forEach(val => {
          objExam[val.tableKey] = val.tableValue
        })
        return objExam
      } else {
        return ''
      }
    },
    // 将键值对的值转为数组
    keyValueToArray (keyValue) {
      if (keyValue !== '{}') {
        let arrayExam = []
        for (let key in keyValue) {
          arrayExam.push({
            tableKey: key,
            tableValue: keyValue[key]
          })
        }
        return arrayExam
      } else {
        return '[]'
      }
    },
    // 如果有事件参数设定的信息，需要展示出来
    showEditInfo () {
      if (this.editInfo.request_parameters) {
        let parametersObj = JSON.parse(this.editInfo.request_parameters)
        this.ruleEditForm.RequestUrl = parametersObj.RequestUrl
        this.ruleEditForm.RequestMethod = parametersObj.RequestMethod
        this.ruleEditForm.RequestHeaderArray = this.keyValueToArray(parametersObj.RequestHeader)
        this.ruleEditForm.RequestQueryStringArray = this.keyValueToArray(parametersObj.RequestQueryString)
        this.ruleEditForm.RequestPostDataArray = this.keyValueToArray(parametersObj.RequestPostData)
      }
    },
    // 点击上部的X关闭弹窗时
    handleClose () {
      this.clearForm()
      this.$emit('giveUp')
    },
    closeDialog () {
      this.clearForm()
      this.$emit('giveUp')
    },
    // 点击确定按钮时
    handleSubmit () {
      let toParent = {
        'RequestUrl': this.ruleEditForm.RequestUrl,
        'RequestMethod': this.ruleEditForm.RequestMethod,
        'RequestHeader': this.getKeyValue(this.ruleEditForm.RequestHeaderArray),
        'RequestQueryString': this.getKeyValue(this.ruleEditForm.RequestQueryStringArray),
        'RequestPostData': this.getKeyValue(this.ruleEditForm.RequestPostDataArray)
      }
      this.$emit('sureEdit', JSON.stringify(toParent))
      this.clearForm()
    }
  },
  watch: {
    showEditDialog: {
      handler: function (val, oldVal) {
        this.dialogEditVisible = val
        if (val) {
          this.paramsList = this.getParamsList()
          this.showEditInfo()
          if (this.editInfo.status === 'show') {
            this.dialogEditTitle = '查看事件参数信息'
          } else {
            this.dialogEditTitle = '编辑事件参数信息'
          }
        }
      },
      deep: true
    }
  }
}
</script>
